<template>
  <div>
    <table-form :disabled="disabled" @next="sales8Ctrl" @jump="jump">
      <template slot="title">
        <h2 class="fromDivTit">
          <div>请确认买家付款与交割日</div>
          <i
            v-if="isEdit && detailRes.step < 10"
            class="edit-icon"
            @click="isEnabled = true"
          />
        </h2>
      </template>
      <div class="form-body">
        <el-form
          ref="sales8Form"
          :model="sales8Form"
          :rules="rules"
          label-width="70px"
          class="formDiv"
        >
          <el-row :gutter="20">
            <el-form-item
              v-model="sales8Form.buyerPaid"
              :disabled="isEdit && !isEnabled"
              label="买家付款:"
              :required="true"
              label-width="85px"
            >
              <el-col :xs="24" :sm="24" :lg="24">
                <el-checkbox
                  v-model="checked"
                  :disabled="isEdit && !isEnabled"
                  @change="change"
                  >已支付</el-checkbox
                >
              </el-col>
            </el-form-item>
          </el-row>
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :lg="24">
              <el-form-item
                label="交割日期:"
                prop="deliveryDate"
                label-width="76px"
              >
                <el-col>
                  <el-date-picker
                    v-model="sales8Form.deliveryDate"
                    :disabled="isEdit && !isEnabled"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="请选择交割日期"
                    style="width: 495px"
                  />
                </el-col>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="32">
            <el-form-item label="备注:" label-width="94px">
              <el-col :xs="24" :sm="24" :lg="24" class="agg">
                <el-input
                  v-model="sales8Form.remarkStep8"
                  :disabled="isEdit && !isEnabled"
                  :rows="5"
                  type="textarea"
                  placeholder="请输入"
                  class="input_s"
                />
              </el-col>
            </el-form-item>
          </el-row>
        </el-form>
        <div v-if="jumpReason" class="jump-box">
          <div class="jump-reson">跳过原因:</div>
          <span>{{ jumpReason }}</span>
        </div>
      </div>
      <template v-if="isEdit" slot="footer">
        <div class="dialog-footer">
          <el-button
            v-if="isEnabled"
            :disabled="disabled"
            type="primary"
            @click="saveEdit"
            >保存</el-button
          >
        </div>
      </template>
    </table-form>
  </div>
</template>
<script>
import TableForm from "../../../lease/components/tableForm";
import { edit, saleStep8 } from "@/api/sale";

export default {
  components: {
    TableForm,
  },
  props: {
    id: {
      type: String,
      default: "",
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      rules: {
        deliveryDate: [
          {
            required: true,
            message: "请选择交割日期",
          },
        ],
      },
      sales8Form: {
        buyerPaid: "",
        deliveryDate: null,
        remarkStep8: "",
        id: "",
      },
      checked: false,
      disabled: false,
      isEnabled: false,
      detailRes: {
        jumpList: [],
      },
    };
  },
  computed: {
    jumpReason() {
      if (!this.detailRes.jumpList) return "";

      const hasReason = this.detailRes.jumpList.find((item) => {
        return item.jumpStep === 8;
      });
      return hasReason ? hasReason.jumpNote : "";
    },
  },
  watch: {
    checked: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.disabled = false;
        } else {
          this.disabled = true;
        }
      },
      deep: true,
    },
    sales8Form: {
      handler(newVal, oldVal) {
        if (!newVal.deliveryDate || !this.checked) {
          this.disabled = true;
        } else {
          this.disabled = false;
        }
      },
      deep: true,
    },
  },
  async mounted() {
    if (!this.isEdit) {
      this.sales8Form = {
        buyerPaid: "",
        deliveryDate: null,
        remarkStep8: "",
        id: this.id,
        stepName: "待买家付款",
      };
    } else {
      await this.$store.dispatch("detail/getSaleDatail", this.id);

      var detail = this.$store.state.detail.saleDetail;
      this.detailRes = detail;
      this.sales8Form = Object.assign(
        {},
        {
          buyerPaid: detail.buyerPaid,
          deliveryDate: detail.deliveryDate
            ? new Date(detail.deliveryDate)
            : null,
          remarkStep8: detail.remarkStep8,
          id: this.id,
          stepName: "待买家付款",
        }
      );
      if (detail.buyerPaid === 1) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    }
  },
  methods: {
    async sales8Ctrl() {
      this.sales8Form.id = this.id;
      var sale8Res = await saleStep8(this.sales8Form);
      if (sale8Res.code === 200) {
        this.$emit("next");
      }
    },
    async saveEdit() {
      var res = await edit(this.sales8Form);
      if (res.code === 200) {
        this.$message({ message: "操作成功", type: "success" });
        this.isEnabled = false;
      }
    },
    change() {
      if (this.checked === true) {
        this.sales8Form.buyerPaid = 1;
      } else {
        this.sales8Form.buyerPaid = 0;
      }
    },
    jump() {
      this.$emit("jump", this.sales8Form);
    },
  },
};
</script>
<style lang="scss" scoped>
.input_s {
  width: 493px;
  left: 9px;
}
.leasecss {
  font-size: 12px;
  color: #d0d0d0;
}
.agg {
  padding-left: 1px !important;
}
.el-icon-edit {
  cursor: pointer;
}
.form-body {
  display: flex;
  .jump-box {
    margin-left: 50px;
    word-break: break-all;
    .jump-reson {
      color: #5ac6b7;
      font-size: 16px;
      margin-bottom: 10px;
    }
  }
}
</style>
